<template>
  <div class="unLogin" v-if="!isLogin">
    <img src="../../static/bg.png" alt="" class="bg" />
    <img src="../../static/logo.png" alt="" class="logo" />
    <img src="../../static/bigIcon.png" alt="" class="bigIcon" />
    <div class="topSitting">头部占位</div>
    <div class="banner">
      <img src="../../static/my_banner_bg.png" alt="" class="bannerBg" />
      <div class="bannerTitle">最高可借20万</div>
      <div class="bannerTips">领<span>2.98%</span>年化利率/单利 限5万6期</div>
      <div class="goLogin" @click="goLogin">登录获取额度</div>
    </div>
    <div class="btnList">
      <div class="btnItem" @click="updatePhone">
        <div class="leftArea">
          <div class="iconArea">
            <img src="../../static/unpdatePhone.png" alt="" class="iconImg" />
          </div>
          <div class="btnTitle">手机换绑</div>
        </div>
        <div class="rightArea">
          <img src="../../static/goIcon.png" alt="" class="goIcon" />
        </div>
      </div>
      <div class="btnItem" @click="contactUs">
        <div class="leftArea">
          <div class="iconArea">
            <img src="../../static/contactUs.png" alt="" class="iconImg" />
          </div>
          <div class="btnTitle">联系我们</div>
        </div>
        <div class="rightArea">
          <img src="../../static/goIcon.png" alt="" class="goIcon" />
        </div>
      </div>
    </div>
    <div class="goLoginBtn" @click="goLogin">登录</div>
  </div>

  <div class="login" v-if="isLogin">
    <img src="../../static/bg.png" alt="" class="bg" />
    <div class="msgIconArea">
      <img src="../../static//news_icon.png" alt="" class="msgIcon" />
      <div class="msgPoint">消息小红点</div>
    </div>
    <div class="topSitting">头部占位</div>
    <div class="userInfo">
      <div class="advantar">
        <img src="../../static//my_head.png" alt="" class="advantarImg" />
      </div>
      <div class="userInfoText">
        <div class="userName">
          <div>{{ userName ? userName : "姓名" }}</div>
          <div class="userPhone">{{ custPhone ? custPhone : "" }}</div>
        </div>
        <div class="loginTime">{{ lastLoginTime ? lastLoginTime : "" }}</div>
      </div>
    </div>
    <img src="../../static/bigIcon.png" alt="" class="bigIcon" />
    <!-- <div class="eventArea">
      <div class="eventAreaBg"></div>
      <div class="eventItem">
        <div class="eventNum">
          <div class="onEvent">12</div>
          <div class="eventTitle">处理中</div>
        </div>
        <img src="../../static//my_chulizhong.png" alt="" class="eventIcon" />
      </div>
      <div class="enentLine"></div>
      <div class="eventItem">
        <div class="eventNum">
          <div class="evented">12</div>
          <div class="eventTitle">已完成</div>
        </div>
        <img src="../../static//my_yiwancheng.png" alt="" class="eventIcon" />
      </div>
    </div> -->
    <div class="userBtns">
      <div class="userBtnsBg"></div>
      <div class="userBtn" @click="goToDo">
        <div class="leftArea">
          <img src="../../static/my_wodedaiban.png" alt="" class="btnIcon" />
          <div class="btnTitle">我的待办</div>
        </div>
        <div class="rightArea"></div>
      </div>
      <div class="userBtn" @click="goMyApplicate">
        <div class="leftArea">
          <img
            src="../../static/mine_icon_message.png"
            alt=""
            class="btnIcon"
          />
          <div class="btnTitle">我的申请</div>
        </div>
        <div class="rightArea"></div>
      </div>
      <div class="userBtn" @click="goMyLoan">
        <div class="leftArea">
          <img src="../../static/my_wodedaikuan.png" alt="" class="btnIcon" />
          <div class="btnTitle">我的贷款</div>
        </div>
        <div class="rightArea"></div>
      </div>
      <div class="userBtn" @click="updatePhone">
        <div class="leftArea">
          <!-- #图片待更换 -->
          <img src="../../static/my_wodedaiban.png" alt="" class="btnIcon" />
          <div class="btnTitle">手机换绑</div>
        </div>
        <div class="rightArea"></div>
      </div>
      <div class="userBtn" @click="contactUs">
        <div class="leftArea">
          <img src="../../static/my_lianxiwom.png" alt="" class="btnIcon" />
          <div class="btnTitle">联系我们</div>
        </div>
        <div class="rightArea"></div>
      </div>
    </div>
    <div class="outLogin" @click="outLogin">退出登录</div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { useAppStore } from "../../store";
const store = useAppStore();
const custPhone = ref(store.custPhone);
const lastLoginTime = ref(store.lastLoginTime);
const userName = ref(store.userName);
// 是否登录
const isLogin = ref(false);
onShow(() => {
  wx.getStorage({
    key: "token",
    success: (res) => {
      if (res.data) {
        isLogin.value = true;
      }
    },
  });
});

// 登录状态下
// 我的待办
const goToDo = () => {
  wx.navigateTo({
    url: "../../packageMine/toDo/toDo",
  });
};

// 我的申请
const goMyApplicate = () => {
  wx.navigateTo({
    url: "../../packageMine/myApplicate/myApplicate",
  });
};

// 我的贷款
const goMyLoan = () => {
  wx.navigateTo({
    url: "../../packageMine/myLoan/myLoan",
  });
};

// 手机换绑
const updatePhone = () => {
  wx.navigateTo({
    url: "../../packageLogin/updatePhone/updatePhone",
  });
};
// 推出登录
const outLogin = () => {
  wx.removeStorageSync('token');
  isLogin.value = false;
};

// 未登录状态下
const goLogin = () => {
  wx.navigateTo({
    url: "../../packageLogin/login/login",
  });
};
// 联系我们
const contactUs = () => {
  // 6.4号，“联系我们”未登录状态，改造与登录后页面一致
  // if (isLogin.value) {
  //   wx.navigateTo({
  //     url: "../../packageMine/contactUs/contactUs",
  //   });
  // } else {
  //   wx.navigateTo({
  //     url: "../../packageLogin/login/login",
  //   });
  // }
  wx.navigateTo({
    url: "../../packageMine/contactUs/contactUs",
  });
};
</script>

<style scoped lang="scss">
.login {
  .outLogin {
    width: 590rpx;
    height: 88rpx;
    border-radius: 44rpx;
    line-height: 88rpx;
    margin: 79rpx 80rpx;
    text-align: center;
    background-image: linear-gradient(to right, #619df1, #4478c1);
    color: #fff;
    font-size: 32rpx;
  }
  .userBtns {
    height: 536rpx;
    margin: 30rpx 28rpx;
    padding: 0 40rpx;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
    .userBtnsBg {
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 0.7;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 16rpx;
      z-index: -9;
    }
    .userBtn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftArea {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .btnIcon {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
        }
        .btnTitle {
          height: 40rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          color: #333333;
        }
      }
      .rightArea {
        background-color: #999999;
        width: 15rpx;
        height: 20rpx;
        mask-image: url("../../static/goIcon.png");
      }
    }
  }
  .eventArea {
    margin: 0 28rpx;
    margin-top: 80rpx;
    height: 120rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    position: relative;
    .eventAreaBg {
      border-radius: 16rpx;
      background-color: #fff;
      opacity: 0.7;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -9;
    }
    .enentLine {
      width: 1rpx;
      height: 80rpx;
      background: #979797;
      opacity: 0.22;
    }
    .eventItem {
      width: 50%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .eventNum {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .onEvent {
          height: 59rpx;
          line-height: 59rpx;
          font-size: 42rpx;
          color: #3277f2;
        }
        .evented {
          height: 59rpx;
          line-height: 59rpx;
          font-size: 42rpx;
          color: #22bff3;
        }
        .eventTitle {
          font-size: 20rpx;
        }
      }
      .eventIcon {
        width: 106rpx;
        height: 106rpx;
      }
    }
  }
  .bg {
    width: 750rpx;
    height: 873rpx;
    position: absolute;
    z-index: -99999;
  }
  .msgIconArea {
    width: 32rpx;
    height: 36rpx;
    background-color: #fff;
    position: absolute;
    left: 46rpx;
    top: 111rpx;
    .msgIcon {
      width: 32rpx;
      height: 36rpx;
    }
    .msgPoint {
      color: transparent;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: #f20909;
      border: 2rpx solid #fff;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .topSitting {
    height: 187rpx;
    opacity: 0;
  }
  .userInfo {
    margin-left: 34rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .advantar {
      width: 144rpx;
      height: 144rpx;
      margin-right: 17rpx;
      .advantarImg {
        width: 144rpx;
        height: 144rpx;
      }
    }
    .userInfoText {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .userName {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #333333;
        font-size: 36rpx;
        margin-bottom: 9rpx;
        font-weight: 600;
        .userPhone {
          color: #666666;
          font-size: 24rpx;
          margin-left: 30rpx;
          font-weight: 500;
        }
      }
    }
  }
  .bigIcon {
    width: 185rpx;
    height: 144rpx;
    position: absolute;
    left: 533rpx;
    top: 279rpx;
    z-index: -9999;
  }
}

.unLogin {
  .bg {
    width: 750rpx;
    height: 873rpx;
    position: absolute;
    z-index: -99999;
  }
  .logo {
    width: 300rpx;
    height: 49rpx;
    position: absolute;
    left: 36rpx;
    top: 191rpx;
  }
  .bigIcon {
    width: 206rpx;
    height: 160rpx;
    position: absolute;
    left: 492rpx;
    top: 206rpx;
    z-index: -9999;
  }
  .topSitting {
    height: 328rpx;
    opacity: 0;
  }
  .banner {
    height: 288rpx;
    padding: 0 40rpx;
    margin: 0 30rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .bannerBg {
      width: 690rpx;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -999;
    }
    .bannerTitle {
      height: 53rpx;
      line-height: 53rpx;
      font-size: 38rpx;
      color: #fff;
    }
    .bannerTips {
      height: 33rpx;
      line-height: 33rpx;
      color: #fff;
      margin-top: 5rpx;
      margin-bottom: 17rpx;
    }
    .goLogin {
      width: 240rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      border-radius: 32rpx;
      background-color: #fff;
      color: #3277f2;
      font-size: 28rpx;
      font-weight: 600;
    }
  }
  .btnList {
    width: 694rpx;
    height: 246rpx;
    margin: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    .btnItem {
      height: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40rpx;
      .leftArea {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .iconArea {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          background-color: #679eff;
          .iconImg {
            width: 32rpx;
            height: 32rpx;
            margin: 9rpx;
          }
        }
        .btnTitle {
          height: 40rpx;
          line-height: 40rpx;
          color: #333333;
          font-size: 28rpx;
          margin-left: 20rpx;
        }
      }
      .rightArea {
        .goIcon {
          background-color: #999999;
          width: 15rpx;
          height: 20rpx;
          mask-image: url("../../static/goIcon.png");
        }
      }
    }
  }
  .goLoginBtn {
    width: 590rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    margin: 63rpx 80rpx;
    border-radius: 44rpx;
    background-image: linear-gradient(to right, #619df1, #4478c1);
    box-shadow: 0rpx 4rpx 12rpx 0rpx #a4c3f3;
    font-size: 32rpx;
    color: #fff;
  }
}
</style>
